<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>News</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link href="./css/nav.css" rel="stylesheet" type="text/css">
  <!-- Demo styles -->
  <style>
    html,
    body,
    .container {
      height: 100%;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      margin: 0;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      flex-direction: column;
    }

    .timeline {
      width: 100%;
      background-color: #000;
      box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
    }

    .timeline .swiper-container {
      height: 777px;
      width: 100%;
      position: relative;
    }

    .timeline .swiper-wrapper {
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
    }

    .timeline .swiper-slide {
      position: relative;
      color: #fff;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .timeline .swiper-slide::after {
      content: "";
      position: absolute;
      z-index: 1;
      right: -115%;
      bottom: -10%;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
      border-radius: 100%;
    }

    .timeline .swiper-slide-content {
      position: absolute;
      text-align: center;
      width: 80%;
      max-width: 310px;
      right: 50%;
      top: 13%;
      -webkit-transform: translate(50%, 0);
      transform: translate(50%, 0);
      font-size: 12px;
      z-index: 2;
    }

    .timeline .swiper-slide .timeline-year {
      display: block;
      font-style: italic;
      font-size: 42px;
      margin-bottom: 50px;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
      color: #fff;
      font-weight: 300;
      opacity: 0;
      transition: .2s ease .4s;
    }

    .timeline .swiper-slide .timeline-title {
      font-weight: 800;
      font-size: 34px;
      margin: 0 0 30px;
      opacity: 0;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
      transition: .2s ease .5s;
    }

    .timeline .swiper-slide .timeline-text {
      line-height: 1.5;
      opacity: 0;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
      transition: .2s ease .6s;
    }

    .timeline .swiper-slide-active .timeline-year {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: .4s ease 1.6s;
    }

    .timeline .swiper-slide-active .timeline-title {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: .4s ease 1.7s;
    }

    .timeline .swiper-slide-active .timeline-text {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: .4s ease 1.8s;
    }

    .timeline .swiper-pagination {
      right: 15% !important;
      height: 100%;
      display: none;
      flex-direction: column;
      justify-content: center;
      font-style: italic;
      font-weight: 300;
      font-size: 18px;
      z-index: 1;
    }

    .timeline .swiper-pagination::before {
      content: "";
      position: absolute;
      left: -30px;
      top: 0;
      height: 100%;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .timeline .swiper-pagination-bullet {
      width: auto;
      height: auto;
      text-align: center;
      opacity: 1;
      background: transparent;
      color: #fff;
      margin: 15px 0 !important;
      position: relative;
    }

    .timeline .swiper-pagination-bullet::before {
      content: "";
      position: absolute;
      top: 8px;
      left: -32.5px;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background-color: #fff;
      -webkit-transform: scale(0);
      transform: scale(0);
      transition: .2s;
    }

    .timeline .swiper-pagination-bullet-active {
      color: #fff;
    }

    .timeline .swiper-pagination-bullet-active::before {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    .timeline .swiper-button-next,
    .timeline .swiper-button-prev {
      background-size: 20px 20px;
      top: 15%;
      width: 20px;
      height: 20px;
      margin-top: 0;
      z-index: 2;
      transition: .2s;
    }

    .timeline .swiper-button-prev {
      left: 8%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
    }

    .timeline .swiper-button-prev:hover {
      -webkit-transform: translateX(-3px);
      transform: translateX(-3px);
    }

    .timeline .swiper-button-next {
      right: 8%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
    }

    .timeline .swiper-button-next:hover {
      -webkit-transform: translateX(3px);
      transform: translateX(3px);
    }

    @media screen and (min-width: 768px) {
      .timeline .swiper-slide::after {
        right: -30%;
        bottom: -8%;
        width: 240px;
        height: 50%;
        box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
      }

      .timeline .swiper-slide-content {
        right: 30%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 310px;
        font-size: 11px;
        text-align: right;
      }

      .timeline .swiper-slide .timeline-year {
        margin-bottom: 0;
        font-size: 32px;
      }

      .timeline .swiper-slide .timeline-title {
        font-size: 46px;
        margin: 0;
      }

      .timeline .swiper-pagination {
        display: flex;
      }

      .timeline .swiper-button-prev {
        top: 15%;
        left: auto;
        right: 15%;
        -webkit-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
      }

      .timeline .swiper-button-prev:hover {
        -webkit-transform: rotate(90deg) translate(-3px, 10px);
        transform: rotate(90deg) translate(-3px, 10px);
      }

      .timeline .swiper-button-next {
        top: auto;
        bottom: 15%;
        right: 15%;
        -webkit-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
      }

      .timeline .swiper-button-next:hover {
        -webkit-transform: rotate(90deg) translate(3px, 10px);
        transform: rotate(90deg) translate(3px, 10px);
      }
    }

    @media screen and (min-width: 1024px) {
      .timeline .swiper-slide::after {
        right: -20%;
        bottom: -12%;
        width: 240px;
        height: 50%;
        box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
      }

      .timeline .swiper-slide-content {
        right: 25%;
      }

      a:link {
        color: #fff;
      }

      a:hover {
        color: #fff;
      }

      a:active {
        color: #fff;
      }

      a:visited {
        color: #fff;
      }

    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <header class="header">
    <nav class="navbar">
      <a href="index.html" class="nav-logo">SpaceEye</a>
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="history.html" class="nav-link">航天历史</a>
        </li>
        <li class="nav-item">
          <a href="human.html" class="nav-link">重要人物</a>
        </li>
        <li class="nav-item">
          <a href="News.html" class="nav-link">近期资讯</a>
        </li>
        <li class="nav-item">
          <a href="aircraft.html" class="nav-link">航天器展示</a>
        </li>
        <li class="nav-item">
          <a href="emailsender.html" class="nav-link">太空漂流瓶</a>
        </li>
        <li></li>
      </ul>
      <div class="nav-bottom">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>

  <div class="container">

    <div class="timeline">
      <div class="swiper-container">

        <div class="swiper-wrapper">

          <div class="swiper-slide" style="background-image: url(./soures/images/PIC1.jpg);" data-year="Oct">
            <div class="swiper-slide-content"><span class="timeline-year">10/13/2022</span>
              <h4 class="timeline-title">环境减灾二号05卫星发射</h4>
              <p class="timeline-text">
                10月13日6时53分，我国在太原卫星发射中心采用长征二号丙运载火箭，成功发射环境减灾二号05卫星。该星将有力提升我国灾害预防、应急管理、生态环境遥感监测业务化应用能力。<br><a
                  href="http://www.cnsa.gov.cn/n6758823/n6758838/c6841025/content.html">>>查看详情</a></p>
            </div>
          </div>

          <div class="swiper-slide" style="background-image: url(./soures/images/PIC2.jpg);" data-year="Sept">
            <div class="swiper-slide-content"><span class="timeline-year">09/30/2022</span>
              <h4 class="timeline-title">“祝融号”的新发现揭秘火星浅表结构</h4>
              <p class="timeline-text">
                “祝融号”火星车次表层探测雷达的主要目标之一是探测乌托邦平原南部现今是否存在地下水/冰。低频雷达成像结果排除了,巡视路径下方0—80米深度范围内有富水层的可能性。同时，热模拟结果也进一步表明，液态水、硫酸盐或碳酸盐卤水难以在“祝融号”火星车着陆区地下100米之内稳定存在。“但是，目前无法排除盐冰存在的可能性。<br><a
                  href="http://www.cnsa.gov.cn/n6758823/n6758838/c6840958/content.html">>>查看详情</a></p>
            </div>
          </div>

          <div class="swiper-slide" style="background-image: url(./soures/images/PIC3.jpg);" data-year="Sept">
            <div class="swiper-slide-content"><span class="timeline-year">09/27/2022</span>
              <h4 class="timeline-title">第十四届中国航展将在珠海举行</h4>
              <p class="timeline-text">中新网北京9月27日电
                (马帅莎)9月27日，第十四届中国国际航空航天博览会(以下简称“中国航展”)新闻发布会在北京举行。记者从会上获悉，第十四届中国国际航空航天博览会将于今年11月8日至13日在广东珠海国际航展中心举行。
                <br><a href="http://www.cnsa.gov.cn/n6758823/n6758838/c6840937/content.html">>>查看详情</a></p>
            </div>
          </div>

          <div class="swiper-slide" style="background-image: url(./soures/images/PIC4.jpg);" data-year="Sept">
            <div class="swiper-slide-content"><span class="timeline-year">09/02/2022</span>
              <h4 class="timeline-title">神舟十四号航天员乘组完成首次出舱活动</h4>
              <p class="timeline-text">
                　北京时间2022年9月2日0时33分，经过约6小时的出舱活动，神舟十四号航天员陈冬、刘洋、蔡旭哲密切协同，完成出舱活动期间全部既定任务，陈冬、刘洋已安全返回问天实验舱，出舱活动取得圆满成功。<br><a
                  href="http://www.cnsa.gov.cn/n6758823/n6758838/c6840827/content.html">>>查看详情</a></p>
            </div>
          </div>

          <div class="swiper-slide" style="background-image: url(./soures/images/PIC5.jpg);" data-year="May">
            <div class="swiper-slide-content"><span class="timeline-year">05/25/2022</span>
              <h4 class="timeline-title">金砖国家航天合作联委会正式成立</h4>
              <p class="timeline-text">
                　5月25日晚，金砖国家航天合作联委会第一次会议以视频方式顺利举行，标志着金砖国家航天合作联委会正式成立，正式开启了金砖国家遥感卫星星座联合观测及数据共享合作的新篇章。中国国家航天局局长张克俭担任本年度联委会主席。<br><a
                  href="http://www.cnsa.gov.cn/n6758823/n6758838/c6840313/content.html">>>查看详情</a></p>
            </div>
          </div>



        </div>


        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./javascript/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var timelineSwiper = new Swiper('.timeline .swiper-container', {
      direction: 'vertical',
      loop: false,
      speed: 1600,
      mousewheelControl: true,
      pagination: '.swiper-pagination',
      paginationBulletRender: function (swiper, index, className) {
        var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
        return '<span class="' + className + '">' + year + '</span>';
      },
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      breakpoints: {
        768: {
          direction: 'horizontal',
        }
      }
    });
  </script>

  <script>
    window.onload = function () {
      const bottom = document.querySelector(".nav-bottom");
      const navMenu = document.querySelector(".nav-menu");

      bottom.addEventListener("click", mobileMenu);

      function mobileMenu() {
        bottom.classList.toggle("active");
        navMenu.classList.toggle("active");
      }
    }

  </script>

</body>

</html>